<template>
    <div id="box">
        <div id="search">
            <el-form :inline="true" :model="sourceSearch" class="demo-form-inline">
                <el-form-item label="资源名称">
                    <el-input v-model="sourceSearch.searchParams.fileName" placeholder="请输入资源名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="file-table">
            <el-table
                    :data="tableData"
                    stripe
                    height="310"
                    style="width: 100%">
                <el-table-column label="资料类别">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.fileType}}</span>
                    </template>
                </el-table-column>
                <el-table-column   label="资料名称">
                    <template slot-scope="scope">
                        <span>{{ scope.row.fileName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="文件大小">
                    <template slot-scope="scope">
                        <span>{{ scope.row.size }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280px">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-download"
                                size="mini"
                                @click="downloadTemplate(scope.$index, scope.row)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="nav-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageSizes"
                    :page-size="sourceSearch.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import {downloadResource, resourcesPage} from "@/api/resources";
import fileDownload from "js-file-download";

    export default {
        name: "ResourceView",
        data() {
            return {
                tableData: [],
                pageSizes: [5, 10, 15],
                total: 20,
                sourceSearch: {
                    limit: 5,
                    page: 1,
                    searchParams: {
                        filename: ''
                    }
                }
            }
        },
        methods: {
            //切换每页显示条数
            handleSizeChange(val) {
                this.sourceSearch.limit = val
                this.list()
            },
            // 切换页码
            handleCurrentChange(val) {
                this.sourceSearch.page = val
                this.list()
            },
            //下载资源
            downloadTemplate(index, row) {
                let uuid = row.uuidName;
                downloadResource(uuid).then(res=>{
                    fileDownload(res,uuid)
                })
            },
            // 搜索
            onSearchSubmit() {
                this.sourceSearch.page = 1
                this.list()
            },
            list() {
                resourcesPage(this.sourceSearch).then(res=>{
                    if (res.code==0){
                        this.total = res.data.total
                        this.tableData = res.data.tableData
                    }
                })
            }
        },
        created() {
            this.list()
        }
    }
</script>

<style scoped>
    #box {
        width: 95%;
        margin: 5px auto 0;
    }

    #search {
        margin-top: 20px;
        padding: 5px;
        border-bottom: 1px solid #eee;
    }

    #file-table {
        margin-top: 20px;
    }


    #nav-page {
        margin-top: 15px;
    }

    .el-button {
        margin-left: 5px;
        margin-right: 5px;
    }
</style>

